<template>
  <div class="operation_tabs">
    <BasicTabs :tabsList="tabsList" @handle-change="handleChange" :tabsValue="activeKey" />
  </div>
  <div class="operation_management">
    <div class="operation_management_right container">
      <template v-if="activeKey == 'continuousIntegrationTools'"> <continuousIntegrationTools /> </template>
      <template v-if="activeKey == 'continuousDeploymentTools'"> <continuousDeploymentTools /> </template>
      <template v-if="activeKey == 'artifactTools'"> <artifactTools /> </template>
      <template v-if="activeKey == 'clusterManagement'"> <clusterManagement /> </template>
      <template v-if="activeKey == 'codeQualityInspectionTool'"> <codeQualityInspectionTool /> </template>
      <template v-if="activeKey == 'deliverySpaceManagement'"> <deliverySpaceManagement /> </template>
      <template v-if="activeKey == 'assemblyLineTemplate'"> <assemblyLineTemplate /> </template>
      <template v-if="activeKey == 'myApplication'"> <myApplication /> </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import clusterManagement from './clusterManagement/index.vue';
import deliverySpaceManagement from './deliverySpaceManagement/index.vue';
import assemblyLineTemplate from './assemblyLineTemplate/index.vue';
import continuousIntegrationTools from './continuousIntegrationTools/index.vue';
import continuousDeploymentTools from './continuousDeploymentTools/index.vue';
import artifactTools from './artifactTools/index.vue';
import codeQualityInspectionTool from './codeQualityInspectionTool/index.vue';
import myApplication from './myApplication/index.vue';
import { usePipelineTemplateStore } from '@/store/modules/pipelineTemplate';
import { storeToRefs } from 'pinia';
const pipelineTemplateStore = usePipelineTemplateStore();
const { tabsName } = storeToRefs<any>(pipelineTemplateStore);
const { setTabsName } = pipelineTemplateStore;
const tabsList = ref([
  { name: '持续集成工具', key: 'continuousIntegrationTools' },
  { name: '持续部署工具', key: 'continuousDeploymentTools' },
  { name: '制品工具', key: 'artifactTools' },
  { name: '多云集成', key: 'clusterManagement' },
  { name: '代码质量检查工具', key: 'codeQualityInspectionTool' },
  { name: '交付空间管理', key: 'deliverySpaceManagement' },
  { name: '流水线模板', key: 'assemblyLineTemplate' },
  { name: '应用列表', key: 'myApplication' },
]);

const activeKey = ref<string>('');
activeKey.value = tabsName.value || 'continuousIntegrationTools';

const handleChange = (key: string) => {
  activeKey.value = key;
  if (key == 'assemblyLineTemplate') {
    setTabsName(activeKey.value);
  } else {
    setTabsName('continuousIntegrationTools');
  }
};

const route = useRoute();
const clearPath = ['pipelineTemplate'];
watch(
  () => route.name,
  (newValue) => {
    if (!clearPath.includes(newValue as string)) {
      setTabsName('continuousIntegrationTools');
    } else {
      setTabsName(activeKey.value);
    }
  },
  { immediate: true },
);
</script>

<style scoped lang="less">
.operation_tabs {
  width: 100%;
  margin-bottom: 16px;
  background-color: #fff;
  padding: 0 24px;
  border-radius: 8px;

  :deep(.ant-tabs-nav) {
    margin: 0;
  }
}
.operation_management {
  width: 100%;
  border-radius: 8px;
  background-color: #fff;
  .operation_management_right {
    overflow: auto;
  }
}
</style>
